<template>
	<tm-fullView>
		<c-menubars :showback="false" theme="grey" color="gray" :flat="true">
			<template slot="default">
				<view></view>
			</template>
		</c-menubars>
		<view class="px-30 mt-20">
			<c-title title="可能认识" value="查看更多"></c-title>
		</view>
		<view class="mt-30">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<template v-for="(item, index) in rowList">
					<view class="scroll-view-item_H white" :class="[index >0 ? 'ml-20' : '', index == 0 ? 'ml-30' : '', index == rowList.length - 1 ? 'mr-30' : '', black_theme ? 'bk' : '']">
						<view class="flex flex-col flex-center fulled-height">
							<view class="relative t-5">
								<view class="scroll-view-item_avatar">
									<!-- <image :src="item.avatar" class="scroll-view-item_avatar round-5" v-if="item.avatar" mode="aspectFill"></image> -->
									<tm-images :src="item.avatar" :width="128" :height="128"></tm-images>
								</view>
								<view>
									<text class="text-size-n">{{ item.name }}</text>
								</view>
								<view class="line-height">
									<text class="text-size-s text-grey">{{ item.city }}</text>
								</view>
							</view>
							<view class="mt-20">
								<view class="follow-btn flex-col flex-center round-10" :class="item.followed ? 'border-follow-btn' : 'tag-accent'">
									<text class="text-size-s" :class="item.followed ? 'text-grey' : ''" v-if="item.followed">已关注</text>
									<text class="text-size-s" v-else>关注</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</scroll-view>
		</view>
		<view class="px-30 mt-30">
			<c-title title="好友消息"></c-title>
		</view>
		<view class="px-30 mt-30">
			<template v-for="(item, index) in itemList">
				<view class="mb-20" @tap="chat">
					<tm-sheet :shadow="0" :margin="[0, 0]" :padding="[0, 0]" :round="5" :height="170">
						<view class="flex flex-col" style="height: 170rpx;justify-content: center;">
							<view class="flex" style="height: 96rpx;">
								<view class="flex">
									<view class="mx-30">
										<image class="list-avatar rounded" :src="item.avatar" mode="aspectFill"></image>
									</view>
									<view class="flex flex-col flex-between">
										<view class="flex flex-between" style="width: 500rpx;">
											<view>
												<text>{{ item.name }}</text>
											</view>
											<view>
												<text class="text-size-s">{{ item.time }}</text>
											</view>
										</view>
										<view class="flex flex-between" style="width: 500rpx;">
											<view>
												<text class="text-size-n text-grey">{{ item.message }}</text>
											</view>
											<view>
												<tm-badges :dot="false" :label="item.newDot" :offset="[0, -5]"></tm-badges>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</tm-sheet>
				</view>
			</template>
		</view>
	</tm-fullView>
</template>

<script>
	export default {
		data() {
			return {
				rowList: [{
					avatar: "https://img.js.design/assets/img/616678eb144489bffcefc3f4.jpg",
					name: "丁浩夏",
					city: "四川 成都",
					followed: false
				}, {
					avatar: "https://img.js.design/assets/img/616678eb1444897952efc3f5.jpg",
					name: "李可",
					city: "河北 石家庄",
					followed: true
				}, {
					avatar: "https://img.js.design/assets/img/616678eb1444897844efc3fa.jpg",
					name: "王玉云",
					city: "四川 成都",
					followed: true
				}, {
					avatar: "https://img.js.design/assets/img/616678ebc7bf4c487aedb5b1.jpg",
					name: "董文",
					city: "四川 成都",
					followed: true
				}],
				itemList: [{
					avatar: "https://img.js.design/assets/img/616678eb2769e00d41966add.jpg",
					name: "崔文宜",
					time: "19:57",
					message: "你快去吧。我在小区门口等你。",
					newDot: 1
				}, {
					avatar: "https://img.js.design/assets/img/616678ebc7bf4cfb0bedb5b2.jpg",
					name: "李瑶",
					time: "16:32",
					message: "那你稍等我一会，我马上下来。",
					newDot: 1
				}, {
					avatar: "https://img.js.design/assets/img/616678eb1444897844efc3fa.jpg",
					name: "王小华",
					time: "21:31",
					message: "那你可先等我几分钟吗？",
					newDot: 1
				}]
			}
		},
		computed: {
			black_theme: function() {
				return this.$tm.vx.state().tmVuetify.black;
			}
		},
		onShow() {
			console.log(this.toRpx(96));
		},
		methods: {
			toRpx(px) {
				return (px * 750 / uni.getSystemInfoSync().windowWidth);
			},
			chat() {
				uni.navigateTo({
					url: '/pages/message/chat'
				})
			}
		}
	}
</script>

<style lang="scss">
	$scroll-view-height: 330rpx;
	
	.scroll-view_H {
		white-space: nowrap;
		height: $scroll-view-height;
		width: 100%;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 192rpx;
		height: $scroll-view-height;
		text-align: center;
		font-size: 36rpx;
		border-radius: 20rpx;
	}
	.scroll-view-item_avatar {
		width: 128rpx;
		height: 128rpx;
	}
	.line-height {
		line-height: 1;
	}
	.follow-btn {
		width: 108rpx;
		height: 48rpx;
	}
	.border-follow-btn {
		border: 1rpx solid rgba(0, 0, 0, .1) !important;
	}
	.list-avatar {
		width: 96rpx;
		height: 96rpx;
	}
</style>
